// CommentInput.js
import React, { useState } from 'react';
import { View, TextInput, Pressable, Text, StyleSheet, Keyboard } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

const CommentInput = ({ onCommentSubmit, isKeyboardVisible, setIsKeyboardVisible }) => {
    const [comment, setComment] = useState('');
  
    // 当用户提交评论时触发
    const handleCommentSubmit = () => {
      onCommentSubmit(comment); // 调用父组件传递的onCommentSubmit函数
      setComment(''); // 清空评论输入框
      setIsKeyboardVisible(false); // 更新父组件的状态
      Keyboard.dismiss(); // 关闭键盘
    };
  
    // 当输入框聚焦时触发
    const handleInputFocus = () => {
      setIsKeyboardVisible(true); // 更新父组件的状态
    };

  return (
    <View style={styles.commentInputContainer}>
      <TextInput
        style={styles.input}
        onChangeText={setComment}
        value={comment}
        placeholder="写评论..."
        onFocus={handleInputFocus}
      />
      {isKeyboardVisible && (
        <Pressable style={styles.sendButton} onPress={handleCommentSubmit}>
          <Text style={styles.sendButtonText}>发送</Text>
        </Pressable>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  commentInputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    borderTopWidth: 1,
    borderTopColor: '#ddd',
    padding: 10,
    backgroundColor: '#fff',
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ddd',
    padding: 10,
    borderRadius: 5,
    backgroundColor: '#fff',
  },
  sendButton: {
    backgroundColor: '#EB7A76',
    borderRadius: 5,
    padding: 10,
    marginLeft: 10,
  },
  sendButtonText: {
    color: '#fff',
    fontWeight: 'bold',
  },
});

export default CommentInput;
